﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="wpOceans">
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
    <title>Pengu - eCommerce HTML5 Template</title>
    <link href="assets/css/themify-icons.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/flaticon.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.css" rel="stylesheet">
    <link href="assets/css/owl.theme.css" rel="stylesheet">
    <link href="assets/css/slick.css" rel="stylesheet">
    <link href="assets/css/slick-theme.css" rel="stylesheet">
    <link href="assets/css/swiper.min.css" rel="stylesheet">
    <link href="assets/css/owl.transitions.css" rel="stylesheet">
    <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
    <link href="assets/css/odometer-theme-default.css" rel="stylesheet">
    <link href="assets/sass/style.css" rel="stylesheet">
</head>

<body>

    <!-- start page-wrapper -->
    <div class="page-wrapper">
        <!-- start preloader -->
        <div class="preloader">
            <div class="vertical-centered-box">
                <div class="content">
                    <div class="loader-circle"></div>
                    <div class="loader-line-mask">
                        <div class="loader-line"></div>
                    </div>
                    <img src="assets/images/preloader.png" alt="">
                </div>
            </div>
        </div>
        <!-- end preloader -->

        <!-- Start header -->
        <header id="header" class="wpo-header-style-3">
            <!-- end topbar -->
            <div class="wpo-site-header">
                <nav class="navigation navbar navbar-expand-lg navbar-light">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
                                <div class="mobail-menu">
                                    <button type="button" class="navbar-toggler open-btn">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar first-angle"></span>
                                        <span class="icon-bar middle-angle"></span>
                                        <span class="icon-bar last-angle"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6 col-6">
                                <div class="navbar-header">
                                    <a class="navbar-brand" href="index.html"><img src="assets/images/logo.svg"
                                            alt="logo"></a>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-1 col-1">
                                <div id="navbar" class="collapse navbar-collapse navigation-holder">
                                    <button class="menu-close"><i class="ti-close"></i></button>
                                    <ul class="nav navbar-nav mb-2 mb-lg-0">
                                        <li>
                                            <a href="index-4.html">Home</a>
                                        </li>
                                        <li><a href="shop.html">Shop</a></li>
                                        <li>
                                            <a href="cart.html">Cart</a>
                                        </li>
                                        <li><a href="contact.html">Contact Us</a></li>
                                    </ul>

                                </div><!-- end of nav-collapse -->
                            </div>
                            <div class="col-lg-2 col-md-2 col-2">
                                <div class="header-right">
                                    <div class="mini-cart">
                                        <button class="cart-toggle-btn"> <i class="fi flaticon-shopping-cart"></i> <span
                                                class="cart-count">2</span></button>
                                        <div class="mini-cart-content">
                                            <button class="mini-cart-close"><i class="ti-close"></i></button>
                                            <div class="mini-cart-items">
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="shop.html"><img
                                                                src="assets/images/shop/mini-cart/img-1.jpg" alt></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="shop.html">White Wedding Shoe</a>
                                                        <span class="mini-cart-item-price">$100.15 x 1</span>
                                                        <span class="mini-cart-item-quantity"><a href="#"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="shop.html"><img
                                                                src="assets/images/shop/mini-cart/img-2.jpg" alt></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="shop.html">Long Sleeve Tops</a>
                                                        <span class="mini-cart-item-price">$230.25 x 2</span>
                                                        <span class="mini-cart-item-quantity"><a href="#"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mini-cart-action clearfix">
                                                <span class="mini-checkout-price">Subtotal: <span>$330.35</span></span>
                                                <div class="mini-btn">
                                                    <a href="checkout.html" class="view-cart-btn s1">Checkout</a>
                                                    <a href="cart.html" class="view-cart-btn">View Cart</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header-search-form-wrapper">
                                        <div class="cart-search-contact">
                                            <button class="search-toggle-btn"><i class="fi flaticon-loupe"></i></button>
                                            <div class="header-search-form">
                                                <form>
                                                    <div>
                                                        <input id="searchText" type="text" class="form-control"
                                                            placeholder="Search here...">
                                                        <button id="searchBtn">
                                                            <i class="fi flaticon-loupe"></i>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header-login" style="margin-left: 0px">
                                        <button class="login-btn-block">
                                            <a class="login-btn" href="login.html">
                                                <i class="fi flaticon-user" style="color: #060530"></i>
                                            </a>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end of container -->
                </nav>
            </div>
        </header>
        <!-- end of header -->

        <!-- start wpo-page-title -->
        <section class="wpo-page-title">
            <div class="container">
                <div class="row">
                    <div class="col col-xs-12">
                        <div class="wpo-breadcumb-wrap">
                            <h2>Product Single</h2>
                            <ol class="wpo-breadcumb-wrap">
                                <li><a href="index.html">Home</a></li>
                                <li>Product</li>
                            </ol>
                        </div>
                    </div>
                </div> <!-- end row -->
            </div> <!-- end container -->
        </section>
        <!-- end page-title -->

        <!-- product-single-section  start-->
        <div class="product-single-section section-padding">
            <div class="container">
                <div class="product-details">
                    <div class="row align-items-center">
                        <div class="col-lg-5">
                            <div class="product-single-img">
                                <div class="product-active owl-carousel">
                                    <div class="item">
                                        <img src="assets/images/product-details/1.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/2.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/3.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/1.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/2.jpg" alt="">
                                    </div>
                                </div>
                                <div class="product-thumbnil-active  owl-carousel">
                                    <div class="item">
                                        <img src="assets/images/product-details/1.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/2.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/3.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/1.jpg" alt="">
                                    </div>
                                    <div class="item">
                                        <img src="assets/images/product-details/2.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="product-single-content">
                                <h5>Long Sleeve Tops</h5>
                                <h6>350.00 USD</h6>
                                <ul class="rating">
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                    <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                </ul>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis ultrices
                                    lectus lobortis, dolor et tempus porta, leo mi efficitur ante, in varius
                                    felis
                                    sem ut mauris. Proin volutpat lorem inorci sed vestibulum tempus. Lorem
                                    ipsum
                                    dolor sit amet, consectetur adipiscing elit. Aliquam
                                    hendrerit sem porta dolor congue sagittis Lorem ipsum dolor sit amet
                                    consectetur.
                                </p>
                                <div class="product-filter-item color">
                                    <div class="color-name">
                                        <span>Color :</span>
                                        <ul>
                                            <li class="color1"><input id="a1" type="radio" name="color" value="30">
                                                <label for="a1"></label>
                                            </li>
                                            <li class="color2"><input id="a2" type="radio" name="color" value="30">
                                                <label for="a2"></label>
                                            </li>
                                            <li class="color3"><input id="a3" type="radio" name="color" value="30">
                                                <label for="a3"></label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="product-filter-item color filter-size">
                                    <div class="color-name">
                                        <span>Weight :</span>
                                        <ul>
                                            <li class="color"><input id="wa1" type="radio" name="size" value="30">
                                                <label for="wa1">4L</label>
                                            </li>
                                            <li class="color"><input id="wa2" type="radio" name="size" value="30">
                                                <label for="wa2">2L</label>
                                            </li>
                                            <li class="color"><input id="wa3" type="radio" name="size" value="30">
                                                <label for="wa3">500ML</label>
                                            </li>
                                            <li class="color"><input id="wa4" type="radio" name="size" value="30">
                                                <label for="wa4">200ML</label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="pro-single-btn">
                                    <div class="quantity cart-plus-minus">
                                        <input type="text" value="1">
                                        <div class="dec qtybutton"></div>
                                        <div class="inc qtybutton"></div>
                                    </div>
                                    <a href="#" class="theme-btn">Add to cart</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-tab-area">
                    <ul class=" nav-mb-3 main-tab" id="tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="descripton-tab" data-bs-toggle="pill"
                                data-bs-target="#descripton" type="button" role="tab" aria-controls="descripton"
                                aria-selected="true">Description</button>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="descripton" role="tabpanel"
                            aria-labelledby="descripton-tab">
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="Descriptions-item">
                                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                                                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
                                                illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                                                explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
                                                odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                                                voluptatem sequi nesciunt. Neque porro quisquam.Sed ut perspiciatis unde
                                                omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                                                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
                                                quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
                                                magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
                                                quisquam </p>
                                            <div class="Description-table">
                                                <h4>Find Your Category :</h4>
                                                <form action="cart" class="table-responsive">
                                                    <table>
                                                        <thead>
                                                            <tr>
                                                                <th>Size</th>
                                                                <th>Weight</th>
                                                                <th>Men</th>
                                                                <th>Women</th>
                                                                <th>Kids</th>
                                                                <th>Offers</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td>S</td>
                                                                <td>250G</td>
                                                                <td>60</td>
                                                                <td>10</td>
                                                                <td>20</td>
                                                                <td>22</td>
                                                            </tr>
                                                            <tr>
                                                                <td>M</td>
                                                                <td>500G</td>
                                                                <td>62</td>
                                                                <td>12</td>
                                                                <td>21</td>
                                                                <td>23</td>
                                                            </tr>
                                                            <tr>
                                                                <td>L</td>
                                                                <td>150G</td>
                                                                <td>64</td>
                                                                <td>14</td>
                                                                <td>23</td>
                                                                <td>24</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Xl</td>
                                                                <td>200G</td>
                                                                <td>66</td>
                                                                <td>18</td>
                                                                <td>24</td>
                                                                <td>25</td>
                                                            </tr>
                                                            <tr>
                                                                <td>2Xl</td>
                                                                <td>330G</td>
                                                                <td>68</td>
                                                                <td>20</td>
                                                                <td>25</td>
                                                                <td>26</td>
                                                            </tr>
                                                            <tr>
                                                                <td>3Xl</td>
                                                                <td>500G</td>
                                                                <td>76</td>
                                                                <td>22 </td>
                                                                <td>27</td>
                                                                <td>28</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- product-single-section  end-->

        <!-- start of wpo-site-footer-section -->
        <footer class="wpo-site-footer">
            <div class="wpo-upper-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-lg-3 col-md-6 col-sm-12 col-12">
                            <div class="widget about-widget">
                                <div class="logo widget-title">
                                    <img src="assets/images/logo.svg" alt="blog">
                                </div>
                                <p>Mattis inelit neque quis donecyir eleng amet.
                                    Amet sed et cursus eu euiod.
                                    Egestaerets in morbiet tristique ornare vulputate vitae enim.</p>
                            </div>
                        </div>
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget link-widget">
                                <h4>Easy 30 days returns</h4>
                                <p>30 days money back guarantee</p>
                                <h4>International Warranty</h4>
                                <p>Offered in the country of usage</p>
                                <h4>100% Secure Checkout</h4>
                                <p>PayPal/ MasterCard / Visa</p>
                            </div>
                        </div>
                        <div class="col col-lg-3 col-md-6 col-sm-12 col-12">
                            <div class="widget newsletter-widget">
                                <div class="widget-title">
                                    <h3>Newsletter</h3>
                                </div>
                                <p>Subscribe to our newsletter and get 10% off your first purchase.</p>
                                <form>
                                    <div class="input-1">
                                        <input type="email" class="form-control" placeholder="Your Email Address.. "
                                            required="">
                                    </div>
                                    <div class="submit clearfix">
                                        <button type="submit">Subscribe</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- end container -->
            </div>
            <div class="wpo-lower-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-xs-12">
                            <p class="copyright"> Copyright &copy; 2023 Canun By <a
                                    href="http://www.bootstrapmb.com">bootstrapMB</a>. All
                                Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end of wpo-site-footer-section -->

        <!-- popup-quickview  -->
        <div id="popup-quickview" class="modal fade" tabindex="-1">
            <div class="modal-dialog quickview-dialog">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="ti-close"></i></button>
                    <div class="modal-body d-flex">
                        <div class="product-details">
                            <div class="row align-items-center">
                                <div class="col-lg-5">
                                    <div class="product-single-img">
                                        <div class="modal-product">
                                            <div class="item">
                                                <img src="assets/images/modal.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="product-single-content">
                                        <h5>White Wedding Shoe</h5>
                                        <h6>120.00 USD</h6>
                                        <ul class="rating">
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis ultrices
                                            lectus lobortis, dolor et tempus porta, leo mi efficitur ante, in varius
                                            felis
                                            sem ut mauris. Proin volutpat lorem inorci sed vestibulum tempus. Lorem
                                            ipsum
                                            dolor sit amet, consectetur adipiscing elit. Aliquam
                                            hendrerit.
                                        </p>
                                        <div class="pro-single-btn">
                                            <div class="quantity cart-plus-minus">
                                                <input type="text" value="1">
                                                <div class="dec qtybutton">-</div>
                                                <div class="inc qtybutton"></div>
                                            </div>
                                            <a href="#" class="theme-btn">Add to cart</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- popup-quickview -->
        </div>

    </div>
    <!-- end of page-wrapper -->

    <!-- All JavaScript files
    ================================================== -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!-- Plugins for this template -->
    <script src="assets/js/modernizr.custom.js"></script>
    <script src="assets/js/jquery.dlmenu.js"></script>
    <script src="assets/js/jquery-plugin-collection.js"></script>
    <!-- Custom script for this template -->
    <script src="assets/js/script.js"></script>
</body>

</html>